<script setup lang="ts">
import type { ItemInterface } from '@/models/items/Item.Interface'
import ItemComponent from './children/Item.component.vue'
import Loader from '@/components/shared/Loader.component.vue'

// expose a property called items with a default value of a blank array
defineProps<{
  items: ItemInterface[]
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'selectItem', id: number): any
}>()

// item click handler
const handleClick = (item: ItemInterface) => {
  emit('selectItem', item.id)
}
// explicetely using any[] as we'll replace this with an interface in the next chapters
</script>

<template>
  <div>
    <h3>Items:</h3>
    <Loader v-show="loading"></Loader>
    <ul v-show="!loading">
      <ItemComponent
        v-for="(item, index) in items"
        :key="item.id"
        :model="item"
        @selectItem="handleClick(item)"
      >
      </ItemComponent>
    </ul>
  </div>
</template>

<style>
ul {
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}
</style>
